<template>
	<div class="admin-page">
		<div class="table-section">
			<el-card class="box-card" shadow="never">
				<template #header>
					<div class="card-header">
						<span>文案列表</span>
					</div>
				</template>
				<!-- 表格主体 -->
				<el-table :data="paginatedTableData" border highlight-current-row @row-click="handleRowClick"
					empty-text="暂无文案数据" @selection-change="handleSelectionChange" ref="copywritingTableRef">
					<!-- 表格列定义 -->
					<el-table-column prop="id" label="ID" min-width="80" show-overflow-tooltip
						align="center"></el-table-column>
					<el-table-column prop="txt" label="文案内容" min-width="400" align="left">
						<template #default="scope">
							<div class="copywriting-content">{{ scope.row.txt }}</div>
						</template>
					</el-table-column>

				</el-table>

				<!-- 分页控件 -->
				<div class="pagination-container">
					<el-pagination background layout="total, sizes, prev, pager, next, jumper" :total="totalItems"
						:page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :current-page="currentPage"
						@size-change="handleSizeChange" @current-change="handleCurrentChange">
					</el-pagination>
				</div>
			</el-card>
		</div>


	</div>
</template>

<script setup>
	import {
		ref,
		computed,
		onMounted
	} from "vue";
	import axios from "@/api/apiaxios";
	import {
		ElMessage,
		ElMessageBox
	} from 'element-plus';

	// --- 表格数据源 ---
	const allcopywriting = ref([]);

	// --- 表格实例引用 ---
	const copywritingTableRef = ref(null);

	// --- 选择状态 ---
	const multipleSelection = ref([]);

	// --- 分页状态 ---
	const currentPage = ref(1);
	const pageSize = ref(10);

	// --- 对话框状态 ---
	const dialogVisible = ref(false);
	const copywritingForm = ref({
		id: null,
		txt: ''
	});

	// --- 计算属性 ---
	const totalItems = computed(() => allcopywriting.value.length);

	const paginatedTableData = computed(() => {
		if (!allcopywriting.value || allcopywriting.value.length === 0) {
			return [];
		}
		const startIndex = (currentPage.value - 1) * pageSize.value;
		const endIndex = startIndex + pageSize.value;
		return allcopywriting.value.slice(startIndex, endIndex);
	});

	// --- 方法 ---
	const handleRowClick = (row) => {
		console.log("Row clicked:", row);
	};

	const handleSelectionChange = (selection) => {
		multipleSelection.value = selection;
	};

	const handleSizeChange = (newSize) => {
		pageSize.value = newSize;
		currentPage.value = 1;
	};

	const handleCurrentChange = (newPage) => {
		currentPage.value = newPage;
	};



	function getCopywritingData() {
		const res = axios.get("/api/official/selectall");

		res
			.then(response => {
				if (response.data.code == 200) {
					allcopywriting.value = response.data.data;
					if (allcopywriting.value.length === 0) {
						ElMessage({
							message: '暂无文案数据',
							type: 'warning'
						});
					}
				} else {
					ElMessage.error(response.data.message || '查询失败');
				}
			})
			.catch(error => {
				console.error('请求失败:', error);
				ElMessage.error('网络请求失败，请稍后重试');
			});
	}

	onMounted(() => {
		getCopywritingData();
	});
</script>

<style lang="scss" scoped>
	.admin-page {
		position: absolute;
		margin: 20px;
		width: 60%;
		top: 20px;
	}

	/* 文案特有的样式 */
	.copywriting-content {
		line-height: 1.6;
		padding: 12px;
		color: #303133;
		font-size: 14px;
		text-align: left;
		word-break: break-all;
		white-space: pre-wrap;
		max-height: 100px;
		overflow-y: auto;

		&::-webkit-scrollbar {
			width: 6px;
			height: 6px;
		}

		&::-webkit-scrollbar-thumb {
			border-radius: 3px;
			background-color: #ddd;
		}

		&::-webkit-scrollbar-track {
			border-radius: 3px;
			background-color: #f5f5f5;
		}
	}

	:deep(.el-table) {
		.el-table__row {
			.el-table__cell {
				.cell {
					white-space: normal;
				}
			}
		}
	}

	.dialog-footer {
		padding-top: 20px;
		text-align: right;
	}

	:deep(.el-dialog__body) {
		padding: 24px;
	}
</style>